<template>
    <a-card style="margin-bottom: 15px;">
        <p slot="title">
            检索条件
        </p>
        <div class="formSearch">
            <a-form layout="inline"  @keydown.native.enter.prevent='toSearch'>
                <template v-if="who === 'taskList'">
                    <a-form-item label="任务名称">
                        <a-input v-model="queryParam.searchText" @change="validateSearchText(queryParam.searchText)"
                                 placeholder="请输入任务名称搜索" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                    <a-form-item label="任务状态">
                        <a-select :allowClear="true" style="width:180px" v-model="queryParam.progress" placeholder="请选择">
                            <a-select-option v-for="item in progressList" :key="item.value" :value="item.value">
                                {{item.name}}
                            </a-select-option>
                        </a-select>
                    </a-form-item>
                </template>
                <template v-if="who === 'templateList'">
                    <a-form-item label="模板名称">
                        <a-input v-model="queryParam.searchText" @change="validateSearchText(queryParam.searchText)"
                                 placeholder="请输入模板名称" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                </template>
                <template v-if="who === 'productList'">
                    <a-form-item label="产品名称/型号">
                        <a-input v-model="queryParam.searchText" @change="validateSearchText(queryParam.searchText)"
                                 placeholder="请输入产品名称或型号搜索" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                    <!--<a-col :span="5">
                        <a-form-item label="设备类型">
                            <a-select :allowClear="true" v-model="queryParam.deviceCode" placeholder="请选择">
                                <a-select-option v-for="item in typeQkdList" :key="item.value" :value="item.value">
                                    {{item.label}}
                                </a-select-option>
                            </a-select>
                        </a-form-item>
                    </a-col>-->
                </template>
                <template v-if="who === 'companyList'">
                    <a-form-item label="单位名称">
                        <a-input v-model="queryParam.searchText" @change="validateSearchText(queryParam.searchText)"
                                 placeholder="请输入单位名称" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                </template>
                <template v-if="who === 'loggerList'">
                    <a-form-item label="操作人员">
                        <a-input v-model="queryParam.operatorName" @change="validateSearchText(queryParam.operatorName,1)"
                                 placeholder="请输入操作员名称" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                    <a-form-item label="日期区间">
                        <a-date-picker
                                :disabledDate="disabledStartDate"
                                format="YYYY-MM-DD"
                                v-model="startValue"
                                placeholder="开始日期"
                                style="width: 150px; float: left"
                        />
                        <a-date-picker
                                :disabledDate="disabledEndDate"
                                format="YYYY-MM-DD"
                                placeholder="结束日期"
                                v-model="endValue"
                                style="width: 150px; float: right"
                        />
                    </a-form-item>
                </template>
                <template v-if="who === 'account'">
                    <a-form-item label="用户名称">
                        <a-input v-model="queryParam.searchText" @change="validateSearchText(queryParam.searchText)"
                                 placeholder="请输入用户名称" />
                        <div class="errorMsg">{{searchErrorMsg}}</div>
                    </a-form-item>
                </template>
                <span class="table-page-search-submitButtons">
						<a-button type="primary" @click="toSearch">查询</a-button>
						<a-button style="margin-left: 8px" @click="reStore">重置</a-button>
					</span>
            </a-form>
        </div>
    </a-card>
</template>
<script>
    import { mapState } from 'vuex'
    import moment from 'moment'
    import verify from 'libs/verify'
    const regSearchText = /^[\u4e00-\u9fa5_a-zA-Z0-9-]+$/;
    export default {
        name: 'search-component',
        data () {
            return {
                verify,
                progressList: [
                    {
                        value: '0', name: '未开始'
                    },
                    {
                        value: '1', name: '正在进行'
                    },
                    {
                        value: '2', name: '暂停'
                    },
                    {
                        value: '3', name: '已完成'
                    },
                    {
                        value: '4', name: '终止'
                    }],
                operatorList: [
                    {
                        value: '1', name: '新增'
                    },
                    {
                        value: '2', name: '修改'
                    },
                    {
                        value: '3', name: '删除'
                    },
                    {
                        value: '4', name: '登录'
                    }],
                form: this.$form.createForm(this),
                name: '',
                rangeDate: undefined,
                queryParam: {
                    searchText: '',
                    deviceCode: undefined,
                    progress: undefined,
                    operatorName: undefined,
                    moduleCode: undefined,
                    startDate: undefined,
                    endDate: undefined
                },
                regSearchText,
                value: {},
                searchErrorMsg: '',
                startValue: null,
                endValue: null,
                endOpen: false,
            }
        },
        props: {
            who: {
                type: String,
                default: ''
            }
        },
        computed: {
            ...mapState({
                formStyle: state => state.common.formStyle,  //表单label，input宽度
            })
        },
        methods: {
            /**
             * Function    : disabledStartDate
             * Description : 对结束时间进行限制
             * Input       : startValue
             * Return      : None
             */
            disabledStartDate (startValue) {
                const endValue = this.endValue;
                if (endValue) {
                    if(moment(startValue).format('YYYY-MM-DD') === moment(endValue).format('YYYY-MM-DD')){
                        return false
                    }
                    return startValue.valueOf() < moment().startOf('day').subtract(36, 'months') || startValue.valueOf() > endValue.valueOf();
                }
                return startValue.valueOf() > moment() || startValue.valueOf() < moment().startOf('day').subtract(36, 'months')
            },
            /**
             * Function    : disabledEndDate
             * Description : 对结束时间进行限制
             * Input       : endValue
             * Return      : None
             */
            disabledEndDate (endValue) {
                const startValue = this.startValue;
                if (startValue) {
                    return startValue.valueOf() >= endValue.valueOf() || endValue.valueOf() > moment()
                }
                return endValue.valueOf() > moment() || endValue.valueOf() < moment().startOf('day').subtract(36, 'months');
            },
            /**
             * Function    : validateSearchText
             * Description : 对搜索框的校验
             * Input       : index,ip
             * Return      : None
             */
            validateSearchText (text,n) {
                text = text || '';
                if (text.length > 30) {
                    text = text.substring(0, 30)
                }
                if(n){
                    this.queryParam.operatorName = text
                }else{
                    this.queryParam.searchText = text
                }
                this.searchErrorMsg = text ? (this.regSearchText.test(text) ? '' : '请输入汉字、字母、数字、_或-字符') : ''
            },
            /**
             * Function    : reStore
             * Description : 重置方法
             * Input       : index,ip
             * Return      : None
             */
            reStore () {
                this.queryParam.searchText = '';
                this.queryParam.deviceCode = undefined;
                this.queryParam.progress = undefined;
                this.searchErrorMsg = '';
                let opt = '';
                if (this.who === 'loggerList') {
                    this.queryParam.operatorName = undefined;
                    this.queryParam.moduleCode = undefined;
                    this.startValue = null;
                    this.endValue = null;
                    this.$emit('getSearchInitLogger', this.queryParam.operatorName, this.queryParam.moduleCode, this.rangeDate)
                } else if (this.who === 'taskList') {
                    opt = this.queryParam.progress
                } else if (this.who === 'productList' || this.who === 'templateList') {
                    opt = this.queryParam.deviceCode
                }
                this.$emit('getSearchInit', this.queryParam.searchText, opt)
            },
            /**
             * Function    : toSearch
             * Description : 开始搜索
             * Input       : index,ip
             * Return      : None
             */
            toSearch (e) {
                e.preventDefault();
                if (this.searchErrorMsg === '') {
                    this.queryParam.searchText = (this.queryParam.searchText.trim().length === 0 ? '' : (this.queryParam.searchText.length > 30 ? this.queryParam.searchText.slice(0, 30) : this.queryParam.searchText.trim()));
                    let opt = '';
                    if (this.who === 'loggerList') {
                        if(this.endValue === null && this.startValue){
                            opt = moment(this.startValue).format('YYYY-MM-DD').valueOf()+','+  moment().format('YYYY-MM-DD').valueOf()
                        }
                        if(this.startValue === null && this.endValue){
                            opt = ','+  moment(this.endValue).format('YYYY-MM-DD').valueOf()
                        }
                        if(this.startValue && this.endValue){
                            opt = moment(this.startValue).format('YYYY-MM-DD').valueOf()+','+ moment(this.endValue).format('YYYY-MM-DD').valueOf()
                        }
                        let operator = this.queryParam.operatorName;
                        let module = this.queryParam.moduleCode;
                        this.$emit('getSearchInitLogger', operator, module, opt)
                    } else if (this.who === 'taskList') {
                        opt = this.queryParam.progress
                    } else if (this.who === 'productList' || this.who === 'templateList') {
                        opt = this.queryParam.deviceCode
                    }
                    this.$emit('getSearchInit', this.queryParam.searchText, opt)
                }
            },
            onChange (date, dateString) {
                this.date = dateString
            }
        },
    }
</script>
<style lang="less" scoped>
    .errorMsg {
        font-size: 11px;
        color: red;
        position: absolute;
        z-index: 1;
        margin-top: 26px;
        width: 260px;
        text-align: left
    }
</style>
